<template>
  <div class="m-page">
    <van-nav-bar
      class="m-page__bar"
      title="忘记密码"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-field
        v-model="mobile"
        label="手机号码"
        type="tel"
        placeHolder="请输入手机号码"
        required
      />
      <van-field
        v-model="text_code"
        label="验证码"
        placeHolder="请输入验证码"
        required
      >
        <van-button
          slot="button"
          size="small"
          type="primary"
          :disabled="sendDisabled"
          @click="sendCode"
          >{{ sendText }}</van-button
        >
      </van-field>
      <van-field
        v-model="password"
        label="登录密码"
        type="password"
        placeHolder="请输入新的登录密码"
        required
      />
      <van-field
        v-model="replay_password"
        label="重复密码"
        type="password"
        placeHolder="请再输入一遍新的登录密码"
        required
      />
    </van-cell-group>
    <div class="g-p--10">
      <van-button type="danger" size="large" @click="resetPassword"
        >确认提交</van-button
      >
    </div>
    <div class="p-logo-wrap"><img src="~_a/img/logo.png" alt="" /></div>
  </div>
</template>

<script>
import { NavBar, CellGroup, Field, Button } from "vant";
import { userModel } from "@/api";
import Tool from "@/lib/tool";
import Util from "@/lib/util";
const tool = new Tool();
const util = new Util();
export default {
  name: "user_info",
  components: {
    "van-nav-bar": NavBar,
    "van-cell-group": CellGroup,
    "van-field": Field,
    "van-button": Button
  },
  data() {
    return {
      text_code: "",
      password: "",
      replay_password: "",
      sendText: "发送验证码",
      sendDisabled: false,
      back_url: ""
    };
  },
  computed: {
    mobile: {
      get() {
        return this.$store.state.loginInfo.mobile;
      },
      set(value) {
        this.$store.commit("updateLoginInfo", { mobile: value });
      }
    }
  },
  mounted() {
    let sl_loginInfo = window.localStorage.getItem("loginInfo") || "";
    let loginInfo = {
      mobile: "",
      password: ""
    };
    if (sl_loginInfo) {
      loginInfo = JSON.parse(sl_loginInfo).value;
    }
    this.back_url = decodeURIComponent(this.$route.query.redirect || "/");
    if (loginInfo) {
      this.$store.commit("updateLoginInfo", { mobile: loginInfo.mobile });
    }
  },
  methods: {
    resetPassword() {
      const formData = {
        mobile: this.mobile,
        text_code: this.text_code,
        password: this.password
      };
      if (!tool.formDataCheck(formData)) {
        this.$toast({ type: "fail", message: "必填项为空！", duration: 1500 });
        return;
      }
      if (this.replay_password !== this.password) {
        this.$toast.fail({ message: "密码不一致", duration: 1500 });
        return;
      }
      userModel._resetPassword(formData).then(res => {
        util._doneSuccess({ res });
        if (res.code === 200) {
          this.$ls.set("loginInfo", {
            mobile: formData.mobile,
            password: formData.password
          });
          this.$router.push({
            name: "login",
            query: {
              redirect: this.back_url
            }
          });
        }
      });
    },
    sendCode() {
      let that = this;
      if (!this.mobile) return;
      if (!tool.checkStr(this.mobile, "phone")) {
        this.$toast({ type: "fail", message: "手机号码错误", duration: 1500 });
        return;
      }
      userModel
        ._sendTextCode({
          mobile: this.mobile
        })
        .then(res => {
          util._doneSuccess({ res });
        });
      util._setTime({
        countdown: 60,
        start() {
          that.sendText = "获取验证码";
          that.sendDisabled = false;
        },
        end(num) {
          that.sendText = `重新发送 ${num} 秒`;
          that.sendDisabled = true;
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped></style>
